<!-- 所有商品 -->
<template>
    <p class="typetitle">推荐</p>
    <el-divider />
    <el-row :gutter="24">
        <el-col :span="6" v-for="(goods, index) in tableData()" :key="index">
            <el-card :body-style="{ padding: '0px' }" shadow="hover">
                <router-link :to="{ name: 'detail', params: { id: goods.id } }">
                    <img :src="api.imgUrl + goods.cover" class="image">
                </router-link>
                <div :style="{ padding: '14px' }">
                    <span>{{ goods.name }}</span>
                    <div class="bottom">
                        <span class="intro">{{ (goods.intro).substring(0, 20) + '......' }}</span>
                        <span>￥{{ goods.price }}</span>
                        <el-button text class="button" @click="addshopCar(goods.id)"> 加入购物车 </el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12" :offset="6">
            <div class="example-pagination-block">
                <el-pagination background layout="prev, pager, next ,total,sizes" :total="state.total"
                    :hide-on-single-page="true" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
            </div>
        </el-col>
    </el-row>
</template>
<script setup>
import api from '@/api/api';
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();
const store = useStore();
const goodsData = ref([]);

// 分页 https://blog.csdn.net/Xwf1023/article/details/126956007
const state = ref({
    page: 1,
    limit: 10,
    total: goodsData.value.length,
});

//前端限制分页（tableData为当前展示页表格）
const tableData = () => {
    return goodsData.value.filter(
        (item, index) =>
            index < state.value.page * state.value.limit &&
            index >= state.value.limit * (state.value.page - 1)
    );
};
//改变页码
const handleCurrentChange = (e) => {
    state.value.page = e;
};
//改变页数限制
const handleSizeChange = (e) => {
    state.value.limit = e;
};

// 初始化
const init = () => {
    api.getRecommend(route.params.rec)
        .then(ret => {
            goodsData.value = ret.result;
            // 由于异步请求原因，需要在此处给分页对象的total赋值，否则获取不到
            state.value.total = goodsData.value.length;
        })
}

const addshopCar = (id) => {
    if (store.getters.isLogin) {
        api.addshopcar(id, store.getters.userInfo.id)
            .then(ret => {
                if (ret.flag) {
                    ElMessage({
                        message: "添加成功",
                        type: "success"
                    })
                }
                else {
                    ElMessage({
                        message: "添加失败",
                        type: "error"
                    })
                }
            })
    }
    else {
        ElMessage({
            message: "请先登录！",
            type: "error"
        })
        router.push({ name: 'login' })
    }
}

// 监听路由变化重新初始化
watch(route, init);
// 初始化
onMounted(init)
</script>
<style scoped>
.typetitle {
    text-align: left;
    margin-left: 10px;
    font-size: 30px;
    color: #E6A23C;
}

.intro {
    text-align: left;
    font-size: 12px;
    color: #999;
    width: 150px;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}

.button {
    padding: 0;
    min-height: auto;
}

.el-card {
    margin: 10px;
}

.image {
    width: 100%;
    display: block;
}

.el-col {
    margin-top: 20px;
}

.gomany {
    width: 200px;
    height: 50px;
    font-size: 20px;
}
</style>